html {
  scroll-behavior: smooth;
}

/*Header Styles*/
.nav-links {
  display: none;
}

/*Main Body styles*/
.skill-div {
 display: grid;
 grid-template-columns: auto auto;
 margin-top: 20px;
 color: black;
 margin-left: 10px;
}

.skill-div hr {
  margin-right: 20px;
  margin-left: 0;
}

.skills-hr {
  color: black;
  margin-left: 10px;
}

label {
  margin-left: -50px;
  color: rgb(72, 75, 72);
  margin-bottom: 10px;
  margin-top: 20px;
}

.education-div {
  display: grid;
  grid-template-columns: auto auto;
  margin-top: 30px;
  margin-left: 20px;
  column-gap: 20px;
  margin-bottom: 80px;
  color: black;
}

.education-div p {
  margin-top: 20px;
}

.exprerience-div {
  margin-bottom: 80px;
  margin-top: 30px;
}

.exprerience-div p {
  margin-top: 20px;
}

.topup {
  text-decoration: none;
  color: rgb(190, 182, 182);
  margin-top: 500px;
}

.top-paragraph {
  margin-top: 150px;
  margin-left: 100px;
}

.vertical-line {
  width: 1px;
  height: 96%;
  background-color: rgb(83, 77, 77);
  margin-top: 20px;
}



@media screen and (max-width: 576px) {
  .main-div {
    grid-template-columns: auto auto;
  }

  .vertical-line {
    display: none;
  }

  .container-fluid img {
    margin-left: -10px;
  }
}

@media screen and (max-width: 560px) {
  .nav-links {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: space-between;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-top: 8px;
  }
  
  .nav-item {
    margin-top: 10px;
    text-decoration: none;
    margin-left: 10px;
    color: black;
  }
  
  .nav-item:hover {
   color: rgb(180, 175, 175);
  }
}